<template>
  <div class="home">
    <!-- 顶部 -->
    <chart-top :chartsData="chartsData"></chart-top>
    <!-- 中间 -->
    <chart-main :arr="chartsData.orderRank" :arr1="chartsData.userRank" :saleArr="chartsData.orderFullYear" :visiteArr="chartsData.userFullYear" :x="chartsData.orderFullYearAxis"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="chartsData.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
import { reqChartsData } from '@/api/home/home';

import ChartTop from './ChartTop/index.vue'
import ChartMain from './ChartMain/index.vue'
import ChartFooter from './ChartFooter/index.vue'

import { onMounted, ref } from 'vue'
// 存储数据可视化数据
let chartsData = ref({})
onMounted(async () => {
  let result = await reqChartsData()
  chartsData.value = result
})

</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background: #ccc;
  padding: 40px;
}
</style>